<template>
	<div class="smart-clip">
		<RouteTitle />
		<!-- 智能剪辑头部 -->
		<div class="smart-clip-header">
			<div class="smart-clip-header-left">
				<div class="flex justify-between items-center">
					<div class="smart-clip-header-title">剪辑数据</div>
					<div class="segment">
						<div class="segment-item" @click="tabChange(tab.key)"
							:class="tab.key == clipStatisticKey ? 'active-tab' : ''" v-for="tab in clipStatisticTab"
							:key="tab.key">
							{{ tab.title }}
						</div>
					</div>
				</div>
				<a-spin tip="加载中..." :spinning="spinning">
					<div class="flex mt-20 justify-between">
						<div class="data-item" v-if="statisticData.curr_data || statisticData.prev_data">
							<div>剪辑任务数</div>
							<div class="data-value">
								{{ statisticData.curr_data.clip_num }}
							</div>
							<a-row v-if="statisticData.curr_data.clip_num -
								statisticData.prev_data.clip_num ==
								0
								? false
								: true
								">
								<a-col>
									<cu-icon :type="statisticData.curr_data.clip_num -
								statisticData.prev_data.clip_num >
								0
								? 'icon-svg-right-top'
								: 'icon-youxiajiantou'
								" style="font-size: 22px" />
								</a-col>
								<a-col :style="{
								color:
									statisticData.curr_data.clip_num -
										statisticData.prev_data.clip_num >
										0
										? 'red'
										: 'green',
							}">
									{{
								clipNum(
									statisticData.curr_data.clip_num,
									statisticData.prev_data.clip_num
								)
							}}
								</a-col>
							</a-row>
						</div>
						<div class="data-item" v-if="statisticData.curr_data || statisticData.prev_data">
							<div>剪辑视频数</div>
							<div class="data-value">
								{{ statisticData.curr_data.clip_video_num }}
							</div>
							<a-row v-if="statisticData.curr_data.clip_video_num -
								statisticData.prev_data.clip_video_num ==
								0
								? false
								: true
								">
								<a-col>
									<cu-icon :type="statisticData.curr_data.clip_video_num -
								statisticData.prev_data.clip_video_num >
								0
								? 'icon-svg-right-top'
								: 'icon-youxiajiantou'
								" style="font-size: 22px" />
								</a-col>
								<a-col :style="{
								color:
									statisticData.curr_data.clip_video_num -
										statisticData.prev_data.clip_video_num >
										0
										? 'red'
										: 'green',
							}">
									{{
								clipVideoNum(
									statisticData.curr_data.clip_video_num,
									statisticData.prev_data.clip_video_num
								)
							}}
								</a-col>
							</a-row>
						</div>
						<div class="data-item" v-if="statisticData.curr_data || statisticData.prev_data">
							<div>素材使用量</div>
							<div class="data-value">
								{{ statisticData.curr_data.material_use_num }}
							</div>
							<a-row v-if="statisticData.curr_data.material_use_num -
								statisticData.prev_data.material_use_num ==
								0
								? false
								: true
								">
								<a-col>
									<cu-icon :type="statisticData.curr_data.material_use_num -
								statisticData.prev_data.material_use_num >
								0
								? 'icon-svg-right-top'
								: 'icon-youxiajiantou'
								" style="font-size: 22px" />
								</a-col>
								<a-col :style="{
								color:
									statisticData.curr_data.material_use_num -
										statisticData.prev_data.material_use_num >
										0
										? 'red'
										: 'green',
							}">
									{{
								materialUseNum(
									statisticData.curr_data.material_use_num,
									statisticData.prev_data.material_use_num
								)
							}}
								</a-col>
							</a-row>
						</div>
						<div class="data-item" v-if="statisticData.curr_data || statisticData.prev_data">
							<div>平均生成成片数</div>
							<div class="data-value">
								{{ statisticData.curr_data.video_material_use_num }}
							</div>
							<a-row v-if="statisticData.curr_data.video_material_use_num -
								statisticData.prev_data.video_material_use_num ==
								0
								? false
								: true
								">
								<a-col>
									<cu-icon :type="statisticData.curr_data.video_material_use_num -
								statisticData.prev_data.video_material_use_num >
								0
								? 'icon-svg-right-top'
								: 'icon-youxiajiantou'
								" style="font-size: 22px" />
								</a-col>
								<a-col :style="{
								color:
									statisticData.curr_data.video_material_use_num -
										statisticData.prev_data.video_material_use_num >
										0
										? 'red'
										: 'green',
							}">
									{{
								videoMaterialUseNum(
									statisticData.curr_data.video_material_use_num,
									statisticData.prev_data.video_material_use_num
								)
							}}
								</a-col>
							</a-row>
						</div>
					</div>
				</a-spin>
			</div>
			<div class="smart-clip-header-right" ref="content">
				<!-- <div class="right-arrow" @click="rightScroll"><right-outlined /></div>
				<div class="left-arrow" @click="leftScroll">
					<left-outlined />
				</div> -->
				<div class="menu-list" :style="{
									transform: 'translateX' + '(' + currentOffset + 'px' + ')',
								}">
					<a-popover v-if="!clipRole.includes('znjj')" placement="top" trigger="hover"
						:getPopupContainer="getPopupContainer" :autoAdjustOverflow="false" content="套餐不支持该权限">
						<div class="menu-item custom">
							<img src="../../../common/image/workShotstackImage/hot.png" class="menu-item-icon" />
							<img src="../../../common/image/workShotstackImage/img_znjj.png" class="menu-item-img" />
							<div class="menu-item-title">智能剪辑</div>
						</div>
					</a-popover>
					<div v-else class="menu-item custom" @click="clipClick({ editModel: 1 })">
						<img src="../../../common/image/workShotstackImage/hot.png" class="menu-item-icon" />
						<img src="../../../common/image/workShotstackImage/img_znjj.png" class="menu-item-img" />
						<div class="menu-item-title">智能剪辑</div>
					</div>
					<!-- @click="clipClick({ editModel: 2 })" -->
					<!-- <a-popover placement="top" trigger="hover" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false"  content="正在开发中"> -->
					<a-popover v-if="!clipRole.includes('yjcp')" placement="top" trigger="hover"
						:getPopupContainer="getPopupContainer" :autoAdjustOverflow="false" content="套餐不支持该权限">
						<div class="menu-item ml-16 ai-build">
							<img src="../../../common/image/workShotstackImage/newBadge.png" class="menu-item-icon" />
							<img src="../../../common/image/workShotstackImage/img_yjcp.png" class="menu-item-img" />
							<div class="menu-item-title">一键成片</div>
						</div>
					</a-popover>
					<div v-else class="menu-item ml-16 ai-build" @click="clipClick({ editModel: 2 })">
						<img src="../../../common/image/workShotstackImage/newBadge.png" class="menu-item-icon" />
						<img src="../../../common/image/workShotstackImage/img_yjcp.png" class="menu-item-img" />
						<div class="menu-item-title">一键成片</div>
					</div>
					<!-- </a-popover> -->
					<!-- @click="clipClick({ editModel: 3 })" 模板剪辑正在开发中 -->
					<!-- <a-popover placement="top" trigger="hover" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false"  content="正在开发中">
						<div class="menu-item ml-16 fast" style="cursor: default;">
							<img src="../../../common/image/workShotstackImage/img_ksjj.png" class="menu-item-img" />
							<div class="menu-item-title">模板剪辑</div>
						</div>
					</a-popover> -->

					<a-popover v-if="false" placement="top" trigger="hover" :getPopupContainer="getPopupContainer"
						:autoAdjustOverflow="false" content="套餐不支持该权限">
						<div class="menu-item ml-16 ai-build">
							<img src="../../../common/image/workShotstackImage/img_ksjj.png" class="menu-item-img" />
							<div class="menu-item-title">模板剪辑</div>
						</div>
					</a-popover>
					<div v-else class="menu-item ml-16 ai-build" @click="clipClick({ editModel: 3 })">
						<img src="../../../common/image/workShotstackImage/img_ksjj.png" class="menu-item-img" />
						<div class="menu-item-title">模板剪辑</div>
					</div>

					<a-popover v-if="!clipRole.includes('jbjj')" placement="top" trigger="hover"
						:getPopupContainer="getPopupContainer" :autoAdjustOverflow="false" content="套餐不支持该权限">
						<div class="menu-item ml-16 script">
							<div class="mask-opacity">
								<a-button class="btn1">
									创建
								</a-button>
								<a-button class="mt-20 btn2">脚本</a-button>
							</div>
							<img src="../../../common/image/workShotstackImage/img_jbjj.png" class="menu-item-img" />
							<div class="menu-item-title">脚本剪辑</div>
						</div>
					</a-popover>
					<div v-else  class="menu-item ml-16 script">
						<div class="mask-opacity">
							<a-button class="btn1" @click="clipClick({ editModel: 4 })">
								创建
							</a-button>
							<a-button class="mt-20 btn2" @click="goToScript">脚本</a-button>
						</div>
						<img src="../../../common/image/workShotstackImage/img_jbjj.png" class="menu-item-img" />
						<div class="menu-item-title">脚本剪辑</div>
					</div>

					<a-popover v-if="!clipRole.includes('twjj')" placement="top" trigger="hover" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false"  content="套餐不支持该权限">
					<!-- <a-popover  placement="top" trigger="hover" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false"  content="套餐不支持该权限"> -->
						<div class="menu-item ml-16 image_text">
							<img src="../../../common/image/workShotstackImage/img_twjj.png" class="menu-item-img" />
							<div class="menu-item-title">图文剪辑</div>
						</div>
					</a-popover>
					<div class="menu-item ml-16 image_text" @click="clipClick({ editModel: 5, type: 'image' })">
						<!-- v-else -->
						<img src="../../../common/image/workShotstackImage/img_twjj.png" class="menu-item-img" />
						<div class="menu-item-title">图文剪辑</div>
					</div>
				</div>
			</div>
		</div>
		<div class="smart-clip-content">
			<div class="content-title">剪辑记录</div>
			<a-tabs v-model:activeKey="recordTab" @change="activeKeyChange">
				<a-tab-pane v-for="item in recordTabList" :key="item.key" :tab="item.title" />
			</a-tabs>
			<div class="search-area">
				<div class="n-grid">
					<div class="n-grid-item">
						<div class="n-input-group">
							<a-button style="width: 130px">剪辑名称</a-button>
							<a-input v-model:value="searchData.title" placeholder="请输入剪辑名称" allowClear
								style="width: calc(100% - 130px)" />
						</div>
					</div>
					<div class="n-grid-item">
						<div class="n-input-group">
							<a-button style="width: 120px">剪辑状态</a-button>
							<a-select allowClear placeholder="请选择剪辑状态" v-model:value="searchData.status"
								style="width: calc(100% - 130px)" :options="statusOptions">
							</a-select>
						</div>
					</div>
					<div class="n-grid-item">
						<div class="n-input-group">
							<a-select ref="select" v-model:value="searchData.date_type"
								style="border-radius: 0 !important">
								<a-select-option value="1">创建时间</a-select-option>
								<a-select-option value="2">更新时间</a-select-option>
							</a-select>
							<a-range-picker style="width: calc(100% - 130px); border-radius: 0 5px 5px 0"
								v-model:value="searchData.dateTime" :ranges="ranges" valueFormat="YYYY-MM-DD" />
						</div>
					</div>
					<div class="n-grid-item" v-if="isExpend">
						<div class="n-input-group">
							<a-button style="width: 130px">关联项目</a-button>
							<a-input v-model:value="searchData.merchant_name" placeholder="请填写关联项目" allowClear
								style="width: calc(100% - 130px)" />
						</div>
					</div>
					<div class="n-grid-item last-gird-item">
						<div class="n-input-group grid-btn">
							<a-button type="primary" style="border: none; border-radius: 6px" @click="searchClick">
								<SearchOutlined />查询
							</a-button>
							<a-button ghost type="primary" style="
								  border: 1px solid #e0e0e6;
								  color: #000;
								  border-radius: 6px;
								  margin-left: 15px;
								" @click="resettingClick">
								<ReloadOutlined />重置
							</a-button>
							<a-button type="link" @click="expendGird">
								<DownOutlined style="color: #2878FF" v-if="!isExpend" />
								<UpOutlined style="color: #2878FF" v-else />
								<span style="color: #2878FF">
									{{ isExpend ? "收起" : "展开" }}
								</span>
							</a-button>
						</div>
					</div>
				</div>
			</div>

			<div class="table-content">
				<!-- :loading="loading" -->
				<a-table :columns="columns" :data-source="tableList" :pagination="pagination"
					@change="handleTableChange">
					<template #bodyCell="{ column, record }">
						<template v-if="column.key == 'title'">
							<div>
								<a-tooltip placement="top">
									<template #title>
										<span>{{ record.id }}</span>
									</template>
									{{ record.title }}
								</a-tooltip>
							</div>
							<div style="color: #999999" v-if="record.merchant">
								{{ record.merchant.name }}
							</div>
						</template>
						<template v-if="column.key == 'status'">
							<div class="status">
								<a-row justify="space-between">
									<a-col>{{ record.status_text }}</a-col>
									<a-popover>
										<template #content>
											<div>剪辑成功：{{ record.clips_number }}</div>
										</template>
										<a-col>
											{{ record.clips_number }}/{{ record.pre_generate_number }}
										</a-col>
									</a-popover>
								</a-row>
								<a-progress v-if="record.status == 1" strokeColor="#3976ff" :percent="100"
									status="active" :show-info="false" />
								<a-progress v-else :strokeColor="record.status == 2 ? '#52c41a' : '#2878FF'" :percent="(record.clips_number / record.pre_generate_number) * 100
								" :show-info="false" />
							</div>
						</template>

						<template v-if="column.key == 'time'">
							<div>创建时间: {{ record.created_at }}</div>
							<div>最近更新时间: {{ record.updated_at }}</div>
						</template>

						<template v-if="column.key == 'folder_statck'">
							<!-- <div> {{ record.folder_statck.folder_name }}({{ record.folder_statck.id }})</div> -->
						</template>

						<template v-if="column.key == 'action'">
							<a-space>
								<a-button v-if="record.button.view_video" type="text" style="color: #2878FF"
									@click="viewWhole(record)">
									查看成片
								</a-button>
								<a-button
									:disabled="!clipRole.includes(recordTabList.find(i => i.key === recordTab).roleKey)"
									v-if="record.button.edit" type="text" style="color: #2878FF"
									@click="editRecord(record)">
									编辑
								</a-button>
								<a-button
									:disabled="!clipRole.includes(recordTabList.find(i => i.key === recordTab).roleKey)"
									v-if="record.button.re_clip" type="text" style="color: #2878FF"
									@click="editAgain(record)">
									再次剪辑
								</a-button>
								<a-button v-if="record.button.copy_and_create" type="text" style="color: #2878FF"
									@click="moreClick(record, 'copy')">
									复制并创建
								</a-button>
								<a-popover v-if="record.button.more" placement="bottom">
									<template #content>
										<div>
											<a-button type="text" @click="moreClick(record, 'copy')">
												复制并创建
											</a-button>
										</div>
										<div>
											<a-button type="text" @click="moreClick(record, 'edit')">
												剪辑信息
											</a-button>
										</div>
										<div>
											<a-button type="text" @click="moreClick(record, 'delete')">
												删除
											</a-button>
										</div>
									</template>
									<a-button type="text" style="color: #2878FF"> 更多 </a-button>
								</a-popover>
								<a-button v-if="record.button.delete" type="text" style="color: #2878FF"
									@click="deleteRecord(record)">
									删除
								</a-button>
								<a-button v-if="recordTab == 2 && record.status !== 2" type="text"
									style="color: #2878FF" @click="exportClick(record)">
									选择导出
								</a-button>
							</a-space>
						</template>
					</template>
				</a-table>
			</div>
		</div>

		<!-- 新建剪辑 -->
		<NewClip :visible="newClipVisible" :data="clipData" @onCancel="newClipVisible = false" @onSubmit="onSubmit" />

		<!-- 删除提示框 -->
		<a-modal v-model:visible="deleteVisible" @ok="deleteHandleOk" :confirmLoading="confirmLoading">
			<div style="font-size: 20px">提示</div>
			<div style="font-size: 16px; margin: 5px 0">
				确定要删除 {{ clipRecord.title }} 么？
			</div>
			<a-checkbox v-model:checked="checked">同时删除素材库相关的成片文件</a-checkbox>
		</a-modal>
	</div>
</template>

<script>
import {
	defineComponent,
	reactive,
	toRefs,
	computed,
	ref
} from "vue";

import {
	ReloadOutlined,
	SearchOutlined,
	DownOutlined,
	UpOutlined,
	RightOutlined,
	LeftOutlined,
} from "@ant-design/icons-vue";
import {
	useRoute,
	useRouter
} from "vue-router";
import NewClip from "../Workbenche/modules/NewClip.vue";
import request from "../../../common/utils/request";
import dayjs from "dayjs";
import {
	message
} from "ant-design-vue";
import store from "../../../store";

export default defineComponent({
	name: "LearningCenter",
	components: {
		ReloadOutlined,
		SearchOutlined,
		DownOutlined,
		UpOutlined,
		NewClip,
		RightOutlined,
		LeftOutlined,
	},
	setup() {
		const state = reactive({
			list: [],
			loading: false,
			isExpend: false,
			count: 0,
			recordTab: 1,
			recordTabList: [{
				title: "智能剪辑",
				key: 1,
				roleKey: 'znjj',
			},
			{
				title: "一键成片",
				key: 2,
				roleKey: 'yjcp',
			},
			{
				title: "模板剪辑",
				key: 3,
				roleKey: 'ksjj',
			},
			{
				title: "脚本剪辑",
				key: 4,
				roleKey: 'jbjj',
			},
			{
				title: "图文剪辑",
				key: 5,
				roleKey: 'twjj',
			},
			],
			statisticData: {},
			clipStatisticKey: "yesterday",
			clipStatisticTab: [{
				title: "昨日",
				key: "yesterday",
			},
			{
				title: "7天",
				key: "week",
			},
			{
				title: "30天",
				key: "month",
			},
			],
			spinning: false,
			columns: [{
				title: "名称",
				dataIndex: "title",
				key: "title"
			},
			{
				title: "状态",
				dataIndex: "status",
				key: "status"
			},
			{
				title: "时间信息",
				dataIndex: "time",
				key: "time"
			},
			{
				title: "画面比例",
				dataIndex: "aspect_ratio",
				key: "aspect_ratio"
			},
			{
				title: "导出文件夹",
				dataIndex: "folder_statck",
				key: "folder_statck"
			},
			{
				title: "操作",
				dataIndex: "action",
				key: "action"
			},
			],
			tableList: [],

			ranges: {
				过去7天: [dayjs().startOf("day").subtract(6, "day"), dayjs()],
				过去30天: [dayjs().startOf("day").subtract(30, "day"), dayjs()],
				过去90天: [dayjs().startOf("day").subtract(90, "day"), dayjs()],
			},
			searchData: {
				title: "",
				date_type: "1",
				status: undefined,
				merchant_name: "",
			},
			time: "1",
			dateTime: [],
			clipData: {},
			newClipVisible: false,
			status: undefined,
			statusOptions: [{
				label: "待剪辑",
				value: 0,
			},
			{
				label: "剪辑中",
				value: 1,
			},
			{
				label: "完成",
				value: 2,
			},
			{
				label: "失败",
				value: 4,
			},
			{
				label: "失败(二次剪辑)",
				value: 5,
			},
			],
			title: "",
			deleteVisible: false,
			checked: false,
			clipRecord: "",
			page: 1,
			pageSize: 10,
			total: 0,

			currentOffset: 0,
			windowSize: 3, //显示个数：每页展示个数
			paginationFactor: 178, //移动距离：每个内层展示div宽度(包括margin)

			confirmLoading: false,
		});

		const clipRole = computed(() => store.state.user?.clipRole || [])
		// 横向滚动条
		//判断是否是第一张/最后一张
		const atEndOfList = computed(() => {
			return (
				state.currentOffset <=
				state.paginationFactor * -1 * (5 - state.windowSize)
			);
		});

		const atHeadOfList = computed(() => {
			return state.currentOffset === 0;
		});
		const rightScroll = () => {
			if (!atEndOfList.value) {
				state.currentOffset -= state.paginationFactor + 150;
				return;
			}
		};

		const leftScroll = () => {
			if (!atHeadOfList.value) {
				state.currentOffset += state.paginationFactor + 150;
			}
		};

		const router = useRouter();

		const tabChange = (key) => {
			state.clipStatisticKey = key;
			getClipStatistic();
		};

		// 剪辑数据统计
		const getClipStatistic = () => {
			state.spinning = true;
			request
				.get("/work_ai", "/user/shotstack/clip/statistic", {
					scope_type: state.clipStatisticKey,
				})
				.then((res) => {
					state.statisticData = {};
					state.statisticData = res.result;
					state.spinning = false;
				})
				.catch(() => {
					state.spinning = false;
				});
		};
		getClipStatistic();

		// 剪辑任务数计算
		const clipNum = (curr_data, prev_data) => {
			let num = 0;
			if (curr_data - prev_data > 0) {
				num = curr_data - prev_data;
			} else {
				num = String(curr_data - prev_data).split("-")[1];
			}
			return num;
		};

		// 剪辑视频数计算
		const clipVideoNum = (curr_data, prev_data) => {
			let num = 0;
			if (curr_data - prev_data > 0) {
				num = curr_data - prev_data;
			} else {
				num = String(curr_data - prev_data).split("-")[1];
			}
			return num;
		};

		// 素材使用量计算
		const materialUseNum = (curr_data, prev_data) => {
			let num = 0;
			if (curr_data - prev_data > 0) {
				num = curr_data - prev_data;
			} else {
				num = String(curr_data - prev_data).split("-")[1];
			}
			return num;
		};

		// 平均生成成片数计算
		const videoMaterialUseNum = (curr_data, prev_data) => {
			let num = 0;
			if (curr_data - prev_data > 0) {
				num = curr_data - prev_data;
			} else {
				num = String(curr_data - prev_data).split("-")[1];
			}
			return num;
		};

		const expendGird = () => {
			state.isExpend = !state.isExpend;
		};

		const goToScript = () => {
			router.push({
				name: "ScriptLibraryList",
			});
		};


		const activeKeyChange = (key) => {

			if (key == 2) {
				if (state.columns[3].title !== "画面比例") {
					let newitem  = {
						title: "画面比例",
						dataIndex: "aspect_ratio",
						key: "aspect_ratio",
					}
					state.columns.splice(3, 0, newitem);
				}

				state.statusOptions.push({
					label: "待导出",
					value: 6,
				}, {
					label: "生成中",
					value: 7,
				});

			} else if (key == 5) {
				if (state.columns[3].title === "画面比例") {
					state.columns.splice(3, 1);
				}

			} else {
				if (state.columns[3].title !== "画面比例") {
					let newitem  = {
						title: "画面比例",
						dataIndex: "aspect_ratio",
						key: "aspect_ratio",
					}
					state.columns.splice(3, 0, newitem);
				}

				state.statusOptions = [{
					label: "待剪辑",
					value: 0,
				},
				{
					label: "剪辑中",
					value: 1,
				},
				{
					label: "完成",
					value: 2,
				},
				{
					label: "失败",
					value: 4,
				},
				{
					label: "失败(二次剪辑)",
					value: 5,
				},
				];
			}
			getClipList();
		};



		const route = useRoute()
		if (route.query?.tab_key) {
			state.recordTab = route.query?.tab_key * 1
		}

		const pagination = computed(() => ({
			total: state.total,
			current: state.page,
			pageSize: state.pageSize,
			showSizeChanger: true,
		}));

		const handleTableChange = (pager, filters, sorter) => {
			state.page = pager.current;
			state.pageSize = pager.pageSize;
			getClipList();
		};

		// 剪辑记录
		const getClipList = (searchData) => {
			let params = {
				edit_model: state.recordTab,
				page: state.page,
				pageSize: state.pageSize,
				...searchData,
			};
			if (params.dateTime) {
				params.start_date = params.dateTime[0];
				params.end_date = params.dateTime[1];
				params.dateTime = undefined;
			}
			state.loading = true;
			request
				.get("/work_ai", "/user/shotstack/clip/list", params)
				.then((res) => {
					state.tableList = res.result.data;
					state.loading = false;
					state.total = res.result.total;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		// 搜索
		const searchClick = () => { 
			state.page = 1;
			state.pageSize = 10;
			getClipList(state.searchData);
		};

		// 重置
		const resettingClick = () => {
			state.searchData.title = "";
			state.searchData.date_type = "1";
			state.searchData.status = undefined;
			state.searchData.dateTime = [];
			state.searchData.merchant_name = "";
			state.page = 1;
			state.pageSize = 10;
			getClipList();
		};

		// 剪辑
		const clipClick = (data) => {
			if (!data.type) {
				data.type = "video";
			}
			
			state.clipData = data;
			state.newClipVisible = true;
		};

		const onSubmit = () => {
			state.newClipVisible = false;
		};

		// 编辑
		const editRecord = (params) => {
			window.open(
				`${window.location.origin}/#/editingCenter?title=${params.title}&aspect_ratio=${params.aspect_ratio}&edit_model=${params.edit_model}&id=${params.id}&merchant_library_id=${params.merchant_library_id}&merchant_folder_statck_id=${params.merchant_folder_statck_id}`
			);
		};

		// 删除
		const deleteRecord = (record) => {
			state.clipRecord = record;
			state.deleteVisible = true;
		};

		// 再次编辑
		const editAgain = (record) => {
			// editRecord(record);
			router.push({
				name: "EditingCenterPreview",
				query: {
					id: record.id,
					type: 'again',
					edit_model: record.edit_model
				},
			});
		};

		const deleteHandleOk = () => {
			state.confirmLoading = true;
			request
				.del("/work_ai", "/user/shotstack/clip/delete", {
					editing_record_id: state.clipRecord.id,
					isDelSliceFolder: state.checked ? 1 : 0,
				})
				.then(() => {
					state.checked = false;
					message.success("删除成功");
					state.confirmLoading = false;
					state.deleteVisible = false;
					getClipList(state.searchData);
				});
		};

		// 查看成片
		const viewWhole = (record) => {
			router.push({
				name: "Synthesis",
				query: {
					detail_id: record.id,
					merchant_library_id: record.merchant_library_id
				}
			});
		};

		// 选择导出
		const exportClick = (record) => {
			router.push({
				name: "EditingCenterPreview",
				query: {
					id: record.id,
					from: 'ai'
				},
			});
		};

		const copyAndCreate = (id) => {
			request.post('/work_ai', '/user/shotstack/clip/copy', {
				id,
			}).then(res => {
				getClipList();
				message.success('创建成功！')
			})
		}

		//脚本剪辑=> 更多
		const moreClick = (record, type) => {
			switch (type) {
				case "copy":
					// 复制并创建
					copyAndCreate(record.id);
					break;
				case "edit":
					router.push({
						name: "ClipDetail",
						query: {
							detail_id: record.id
						}
					});
					break;
				case "delete":
					deleteRecord(record);
					break;
			}
		};

		const getPopupContainer = (trigger) => {
			return trigger;
		};

		const init = () => {
			getClipList();
		};
		init();

		return {
			...toRefs(state),
			clipRole,
			tabChange,
			expendGird,
			goToScript,
			clipClick,
			onSubmit,
			activeKeyChange,
			editRecord,
			deleteRecord,
			deleteHandleOk,
			searchClick,
			pagination,
			handleTableChange,
			resettingClick,
			exportClick,
			viewWhole,
			moreClick,
			editAgain,
			rightScroll,
			leftScroll,
			clipNum,
			clipVideoNum,
			materialUseNum,
			videoMaterialUseNum,
			getPopupContainer
		};
	},
});
</script>

<style lang="less" scoped>
.smart-clip {
	padding: 0 20px 20px 20px;
}

.smart-clip-header {
	display: flex;
	height: 220px;
	margin: 20px 0;
}

.smart-clip-header-title {
	font-size: 16px;
}

.smart-clip-header-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	width: 700px;
	padding: 0 20px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.smart-clip-header-right {
	width: calc(100% - 700px);
	margin-left: 20px;
	overflow: hidden;
	position: relative;

	.right-arrow {
		position: absolute;
		top: 58%;
		right: 5px;
		z-index: 11;
		transform: translateY(-84%);
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #ffffff;
		color: #2878FF;
		font-size: 20px;
		box-shadow: 0 0 18px #2878FF4d;
		border-radius: 50%;
		cursor: pointer;
		opacity: 0;
		transition: 0.3s ease;
	}

	.left-arrow {
		position: absolute;
		top: 58%;
		left: 5px;
		z-index: 11;
		transform: translateY(-84%);
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #ffffff;
		color: #2878FF;
		font-size: 20px;
		box-shadow: 0 0 18px #2878FF4d;
		border-radius: 50%;
		cursor: pointer;
		opacity: 0;
		transition: 0.3s ease;
	}

	&:hover {
		.right-arrow {
			opacity: 1;
		}

		.left-arrow {
			opacity: 1;
		}
	}
}

.segment {
	width: 260px;
	display: flex;
	padding: 5px;
	background-color: #ff916514;
}

.segment-item {
	--n-tab-border-radius: 6px;
	overflow: hidden;
	border-radius: var(--n-tab-border-radius);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #ac7e7d;
}

.active-tab {
	box-shadow: 4px 4px 10px #2878FF33;
	background-color: #fff;
	color: #2878FF;
}

.data-item {
	padding: 16px 15px;
	border-radius: 16px;
	background: #ffffff;
	min-width: 150px;
	min-height: 128px;
	flex-shrink: 0;
}

.data-value {
	font-family: DIN Alternate Bold;
	font-size: 26px;
	font-weight: 700;
	margin-top: 10px;
}

.menu-list {
	display: flex;
	transition: transform 0.5s ease-in-out;
	transform: translatex(0px);
}

.menu-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(0, 0, 0, 0.05);
	min-width: 180px;
	cursor: pointer;
	border-radius: 16px;
	overflow: hidden;
	height: 220px;
	transition: all 0.3s;

	:deep(.ss-popover-placement-top) {
		top: -2px !important;
	}
}

.menu-item-icon {
	position: absolute;
	right: 0;
	top: 0;
	width: 70px;
}

.menu-item-img {
	width: 110px;
}

.menu-item-title {
	font-size: 18px;
}

.ml-16 {
	margin-left: 16px;
}

.custom:before,
.ai-build:before {
	background: linear-gradient(46deg,
			#fcfcfc 0%,
			#e8e5fa 44%,
			#e8e5fa 56%,
			#e8e5fa 68%,
			#f6f6f6 100%);
	opacity: 0;
}

.fast:before {
	background: linear-gradient(46deg, #fcfcfc 0%, #dff5fa 56%, #fcfcfc 100%);
	opacity: 0;
}

.script:before {
	background: linear-gradient(46deg, #fcfcfc 0%, #deebff 56%, #f6f6f6 100%);
}

.menu-item:hover:before {
	opacity: 1;
}

.image_text:before {
	background: linear-gradient(46deg,
			#f4d0d1 0%,
			#f7efea 44%,
			#f7f0ea 56%,
			#f7efe9 68%,
			#f8e1df 100%);
	opacity: 0;
}

.menu-item:hover .menu-item-img,
.menu-item:hover .menu-item-title {
	transform: translateY(-5px) scale(1.05);
}

.menu-item .menu-item-img {
	width: 110px;
	transition: all 0.3s;
}

.menu-item:before {
	content: "";
	opacity: 0;
	position: absolute;
	inset: 0;
	transition: opacity 0.5s;
}

.content-title {
	font-size: 16px;
}

.n-grid {
	display: flex;
}

.search-area {

	// min-width: 1200px;
	button {
		border-radius: 5px 0 0 5px;
	}

	.ss-input-affix-wrapper {
		border-radius: 0 5px 5px 0;
	}

	.ss-select {
		border-radius: 0 5px 5px 0;
	}
}

/* 当屏幕宽度大于等于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {

	/* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
	.n-grid {
		display: grid;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, minmax(0px, 1fr));
		gap: 20px 16px;
	}

	.last-gird-item {
		grid-column: 4 / span 1 !important;
		display: flex;
		justify-content: flex-end;
	}
}

/* 当屏幕宽度小于 1199px 时应用的样式 */
@media screen and (max-width: 1199px) {

	/* 在这里添加针对 799px 及以下屏幕宽度的样式 */
	.n-grid {
		display: grid;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0px, 1fr));
		gap: 20px 16px;

		.last-gird-item {
			grid-column: 2 / span 1;
		}
	}
}

.n-grid-item {
	grid-column: span 1 / span 1;
}

.hidden-grid-item {
	display: none;
}

.n-input-group {
	display: inline-flex;
	width: 100%;
	flex-wrap: nowrap;
	vertical-align: bottom;
}

.grid-btn {
	display: flex;
	justify-content: flex-end;
}

.table-content {
	margin-top: 30px;

	.status:hover {
		color: red;
		cursor: pointer;
	}
}

.script .mask-opacity {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: all 0.2s;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 15;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.8);
	border: 1px dashed rgba(255, 101, 98, 0.5);

	.btn1 {
		width: 80px;
		height: 40px;
		color: #fff;
		background: #2878FF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;
	}

	.btn2 {
		width: 80px;
		height: 40px;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;
	}
}

.script:hover .mask-opacity {
	opacity: 1;
}

.script .mask-opacity .btn2:hover {
	color: #2878FF;
}

button {
	border-radius: 5px;
}
</style>